<template>
  <div class="pos">
    <el-row>
      <el-col :span="7" class="pos-order" id="order-list">
        <el-tabs>
          <el-tab-pane label="点餐">
            <!-- el-table 的属性：show-summary 可以计算一列的数据，第一列不统计-->
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column prop="goodsName" label="商品名称"></el-table-column>
              <el-table-column prop="count" label="数量" width="50"></el-table-column>
              <el-table-column prop="price" label="单价" width="70"></el-table-column>
              <el-table-column label="操作" width="100">
                <template slot-scope="scope">
                  <el-button type="text" size="small" @click="delSinleGoods(scope.row)">删除</el-button>
                  <el-button type="text" size="small" @click="addOrderList(scope.row)">增加</el-button>
                </template>
              </el-table-column>

            </el-table>

          </el-tab-pane>
          <el-tab-pane label="挂单">
            挂单
          </el-tab-pane>
          <el-tab-pane label="外卖">
            外卖
          </el-tab-pane>
        </el-tabs>
        <div class="totalCount">
          <small>小结：</small>
          <small>数量：</small>
          {{totalCount}}   &nbsp;
          <small>金额：</small>
          {{totalMoney}}
        </div>
        <div class="bt-settlement">
          <el-button type="warning">挂单</el-button>
          <el-button type="danger" @click="delAllGoods()">删除</el-button>
          <el-button type="success" @click="checkout()">结账</el-button>
        </div>
      </el-col>

      <el-col :span="17">
        <div class="often-goods">
          <div class="title">常用商品</div>
          <div class="often-goods-list">
            <ul>
              <li v-for="goods in oftenGoods" @click="addOrderList(goods)">
                <span>{{ goods.goodsName }}</span>
                <span class="o-price">￥{{ goods.price }}元</span>
              </li>
            </ul>
          </div>
        </div>
        <div class="goods-type">
          <el-tabs>
            <el-tab-pane label="汉堡">
              <div v-for="goods in type0Goods" @click="addOrderList(goods)">
                <ul class='cookList'>
                  <li>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span><br>
                    <span class="foodPrice">￥{{ goods.price }}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="小吃">
              <div v-for="goods in type1Goods" @click="addOrderList(goods)">
                <ul class='cookList'>
                  <li>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span><br>
                    <span class="foodPrice">￥{{ goods.price }}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="饮料">
              <div v-for="goods in type2Goods" @click="addOrderList(goods)">
                <ul class='cookList'>
                  <li>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span><br>
                    <span class="foodPrice">￥{{ goods.price }}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
            <el-tab-pane label="套餐">
              <div v-for="goods in type3Goods" @click="addOrderList(goods)">
                <ul class='cookList'>
                  <li>
                    <span class="foodImg"><img :src="goods.goodsImg" width="100%"></span>
                    <span class="foodName">{{goods.goodsName}}</span><br>
                    <span class="foodPrice">￥{{ goods.price }}元</span>
                  </li>
                </ul>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>
    </el-row>
  </div>
</template>


<script>
  import axios from 'axios';

  export default {
    name: 'pos',
    data() {
      return {
        //已点餐的数据
        tableData: [],
        //常用商品
        oftenGoods: [],
        type0Goods: [],
        type1Goods: [],
        type2Goods: [],
        type3Goods: [],
        totalMoney: 0,
        totalCount: 0
      }
    },
    mounted: function () {
      //所有的加载完毕之后执行 ,动态获取浏览器的高度。
      var orderHeiht = document.body.clientHeight;
      document.getElementById("order-list").style.height = orderHeiht + "px";
    },
    methods: {
      //点击商品添加商品的方法
      addOrderList(goods) {
        this.totalMoney = 0;
        this.totalCount = 0;
        //商品是否已经存在订单列表中
        let isHave = false;
        for (let i = 0; i < this.tableData.length; i++) {
          // 订单中的数据                  选择的数据
          if (this.tableData[i].goodsId == goods.goodsId) {
            isHave = true;
          }
        }
        //根据判断值，判断是新增项还是增加数据
        if (isHave) {
          //已选商品中            循环已选商品    如果两个相等 就
          let arr = this.tableData.filter(o => o.goodsId == goods.goodsId);

          //
//          let arr = this.tableData.filter(function a() {
//            a.goodsId == goods.goodsId;
//          })
          arr[0].count++;
        } else {
          let newGoods = {goodsId: goods.goodsId, goodsName: goods.goodsName, price: goods.price, count: 1};
          this.tableData.push(newGoods);
        }
        ;
        this.getAllMoney();
      },
      //添加方法结束

      //删除已选商品
      delSinleGoods(goods) {
        this.tableData = this.tableData.filter(o => o.goodsId != goods.goodsId);
        this.getAllMoney();
      },
      //清空已选所有功能
      delAllGoods() {
        this.tableData = [];
        this.totalCount = 0;
        this.totalMoney = 0;
      },

      //计算总数量和总的钱
      getAllMoney() {
        this.totalMoney = 0;
        this.totalCount = 0;
        //判断点餐栏中是否有数据才进行统计
        if (this.tableData) {
          // 随着每次增加商品，统计总的数量和价格随时变化
          this.tableData.forEach((element) => {
            this.totalCount += element.count;
            this.totalMoney = this.totalMoney + (element.price * element.count);
          });
        }
      },
      //结账
      checkout() {
        if (this.tableData != 0) {
          this.tableData = [];
          this.totalMoney = 0;
          this.totalCount = 0;
          this.$message({
            message: '结账成功！',
            type: 'success'
          })
        } else {
          this.$message.error('不能空姐！');
        }
      }

    },
    //模块加载时执行该方法
    created: function () {
      //从服务器动态获取数据
      axios.get('http://jspang.com/DemoApi/oftenGoods.php')
        .then(reponse => {
          this.oftenGoods = reponse.data;
        })
        .catch(error => {
          alert(error);
        });
      //从服务器中动态获取数据
      axios.get('http://jspang.com/DemoApi/typeGoods.php')
        .then(reponse => {
          //初始化赋值
          this.type0Goods = reponse.data[0];
          this.type1Goods = reponse.data[1];
          this.type2Goods = reponse.data[2];
          this.type3Goods = reponse.data[3];
        })
        .catch(error => {
          alert(error);
        });
    }
  }
</script>


<style scoped>
  .pos-order {
    border-color: #F9fafc;
    border-right: 1px solid #C0ccDA;
  }

  .bt-settlement {
    margin-top: 10px;
  }

  .title {
    height: 20px;
    width: 98.5%;
    border-bottom: 1px solid #D3dce6;
    background-color: #f9fafc;
    padding: 10px;
    text-align: left;
  }

  .often-goods-list ul li {
    list-style: none;
    float: left;
    border: 1px solid #E5E9F2;
    padding: 10px;
    margin: 10px;
    background-color: #FFF;
    text-align: center;
    cursor: pointer;
  }

  .o-price {
    color: #58b7ff;
  }

  .goods-type {
    /**清除浮动**/
    clear: both;
    margin-left: 2px;
  }

  .cookList li {
    list-style: none;
    width: 20%;
    border: 1px solid #E5E9F2;
    height: auto;
    overflow: hidden;
    background-color: #fff;
    padding: 2px;
    float: left;
    margin: 2px;
    cursor: pointer;
  }

  .coolList li span {
    display: block;
    float: left;
    cursor: pointer;
  }

  .foodImg {
    /*width: 28%;*/
  }

  .foodName {
    font-size: 16px;
    padding-left: 10px;
    color: brown;
  }

  .foodPrice {
    font-size: 16px;
    padding-left: 10px;
    padding-top: 10px;
  }

  .totalCount {
    height: auto;
    overflow: hidden;
    text-align: center;
    font-size: 16px;
    background-color: #fff;
    border-bottom: 1px solid #E5E9F2;
    padding: 10px;
  }

</style>
